iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 27
1
Modern Web

有角拾系列 第 27

Star Calculator

  • 分享至 

  • xImage
  •  

JS雜食-06--小實作-1: Star Calculator

tags: ithome

用HTML+純JS試作一表單,規格:

  1. 兩個輸入框
  2. 一個提交按鈕
  3. 點擊按鈕時顯示:輸入的兩個數字總和

參考資料1:MDN — the Mozilla Developer Network


前置作業

  1. 基本HTML, CSS知識

  2. 新增一資料夾至少包含以下三種檔案:index.html、style.css、main.js 到對應資料夾結構中,我想放到背景的照片也放入images資料夾中

images
|--nasa.jpg
scripts
|--main.js
styles
|--style.css
index.html

撰寫HTML

  1. 數字需要透過輸入框寫入,而輸入框需要包覆在<form>tag之中;依序在<body>中填入<form>、2個<input>後,給予對應#id以便JS操作,這邊的<form> id命名為starCalculator,而2個<input>框id則分別命名為starNumber1starNumber2

  2. 引入JS檔案,放在</body>前,以避免HTML畫面還沒讀完JS就先運作,我們需要的順序總是HTML+CSS > JS

<body>
  <form id="starCalculator">
    <p>
      <input type="number" placeholder="input a random number" id="starNumber1"> + <input type="number" placeholder="input a random number" id="starNumber2">
    </p>
    <input type="submit" id="submit">
  </form>
  
  <script src="scripts/main.js"></script>
</body>

腳本載入策略(Script loading strategies)
若需要將內部JavaScript<script> 或外部JavaScript放在HTML的


上一篇
# JS雜食-06--小實作之1
下一篇
# JS雜食-06--小實作-1: Star Calculator
系列文
有角拾30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言